import { Modal, TabsProps, Tabs } from "antd";
import { memberInfo } from "@/popup/stores/member";
import { useMemo, useState } from "react";
import { MemberInfo } from "./MemberInfo";
import { MemberRoom } from "./MemberRoom";
import { FlipInfo } from "./FlipInfo";
import "./index.less"


type IProps = {
  open: boolean;
  setOpen: (open: boolean) => void;
  info: memberInfo;
}
export const MemberDetailModal = ({ open, setOpen, info }: IProps) => {
  const [curKey, setCurKey] = useState<string>("infos")
  const items: TabsProps['items'] = useMemo(() => {
    return [
        {
          key: 'infos',
          label: '成员信息',
          children: <MemberInfo />
        },
        {
          key: 'rooms',
          label: '成员房间',
          children: <MemberRoom />
        },
        {
          key: 'flips',
          label: '成员翻牌',
          children: <FlipInfo info={info} />
        }
      ]
  }, [info])
  const onChange = (key: string) => {
    setCurKey(key)
  }
  console.log(curKey)
  return <Modal style={{ top: 20 }} footer={null} width={680} title="成员详情" open={open} onCancel={() => setOpen(false)}>
    <Tabs defaultActiveKey="infos" items={items} onChange={onChange} />
  </Modal>;
};